<template>
  <view>
    <nut-swiper
        :init-page="initPage"
        :pagination-visible="paginationVisible"
        :pagination-color="paginationActiveColor"
        :pagination-unselected-color="paginationColor"
        :auto-play="autoPlay"
        :loop="true"
        :style="{ height: height }"
    >
<!--      v-for="(item, index) in data" :key="imageId"-->
      <nut-swiper-item >
        <img-oss
            :mode="mode"
            default-src="/static/images/icon_homeBg.png"
            :width="width"
            :height="height"
            :border-radius="radius"
        ></img-oss>
      </nut-swiper-item>
    </nut-swiper>
  </view>
</template>
<script>

export default {
  name: "Swiper",
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    width: {
      type: String,
      default: "686rpx",
    },
    height: {
      type: String,
      default: "280rpx",
    },
    //是否展示 分页指示器
    paginationVisible: {
      type: Boolean,
      default: true,
    },
    // 是否是否循环轮播
    loop: {
      type: Boolean,
      default: true,
    },
    autoPlay: {
      type: Number,
      default: 1500,
    },
    //分页指示器没有选中的颜色
    paginationColor: {
      type: String,
      default: "#fff",
    },
    //分页指示器没有选中的颜色
    paginationActiveColor: {
      type: String,
      default: "#2068f9",
    },
    //轮播方向
    direction: {
      type: String,
      default: "horizontal", // vertical
    },
    initPage: {
      type: Number,
      default: 0,
    },
    radius: {
      type: String,
      default: "16rpx",
    },
    /** 图片裁剪模式 */
    mode: {
      type: String,
      default: "scaleToFill",// aspectFit --全展示
    },
  },
 methods: {
   handleSwiper(e){
     this.$emit("click", e);
   }
 },
};
</script>
<style scoped lang="scss">
//.nut-swiper-item:deep() {
//  width: 100% !important;
//  height: 280px !important;
//}
</style>
